<template>
	<view class="z-popup">
		<uni-popup
		ref="popupRef"
		:type="position"
		background-color="transparent"
		@change="onChange"
		:safe-area="false"
		:is-mask-click="isMaskClick"
	  	>
			<view class="popup-wrapper" :style="roundStyle">
				<slot name="head">
					<view class="popup-head" v-if="hasHead">
						<text class="cancel" :class="{ disabled: disabledCancel }" @click="onCancel">{{ cancelText }}</text>
						<text class="title">{{ title }}</text>
						<text class="confirm" :class="{ disabled: disabledConfirm }" @click="onConfirm">{{ confirmText }}</text>
					</view>
				</slot>
				<view class="content">
					<slot></slot>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
	modelValue: {
	  type: Boolean,
	  default: false
	},
	title: {
	  type: String,
	  default: ''
	},
	hasHead: {
	  type: Boolean,
	  default: false
	},
	cancelText: {
	  type: String,
	  default: '取消'
	},
	confirmText: {
	  type: String,
	  default: '确定'
	},
	position: {
	  type: String,
	  default: 'bottom'
	},
	maxHeight: {
	  type: String,
	  default: '50vh'
	},
	round: {
	  type: [String, Array],
	  default: ''
	},
	isMaskClick: {
	  type: Boolean,
	  default: true
	},
	disabledCancel: {
	  type: Boolean,
	  default: false
	},
	disabledConfirm: {
	  type: Boolean,
	  default: false
	}
})

const emits = defineEmits(['update:modelValue', 'cancel', 'confirm', 'closed'])

const popupRef = ref()

watch(() => props.modelValue, (newV) => {
	togglePopupStatus(newV)
})

const roundStyle = computed(() => {
	if (props.round) {
	  const { round, position } = props
	  let borderRadius
	  if (Array.isArray(round) && round.length) {
		borderRadius = round.join(' ')
	  } else {
		switch (position) {
		  case 'center':
			borderRadius = `${round} ${round} ${round} ${round}`
			break
		  case 'top':
			borderRadius = `0 0 ${round} ${round}`
			break
		  case 'bottom':
			borderRadius = `${round} ${round} 0 0`
			break
		  case 'left':
			borderRadius = `0 ${round} ${round} 0`
			break
		  case 'right':
			borderRadius = `${round} 0 0 ${round}`
			break
		}
	  }
	  return {
		borderRadius,
		overflow: 'hidden'
	  }
	} else {
	  return undefined
	}
})

const onChange = ({ show }) => {
	if (!show) {
		emits('update:modelValue', false)
	}
}

const togglePopupStatus = (bool = true) => {
	if (popupRef.value) {
		if (bool) {
			popupRef.value.open()
		} else {
			popupRef.value.close()
			emits('closed')
		}
	}
}

const onCancel = () => {
	if(!props.disabledCancel) emits('cancel')
}

const onConfirm = () => {
	if(!props.disabledConfirm) emits('confirm')
}
</script>

<style lang="scss">
.z-popup {
	.popup-wrapper {
		background-color: #fff;
		.popup-head {
			padding: 24rpx 32rpx;
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #E5E5E5;
			font-size: 32rpx;
			.cancel {
				color: #222;
				&.disabled {
					visibility: hidden;
				}
			}
			.title {
				font-size: 32rpx;
			}
			.confirm {
				color: #0080FF;
				&.disabled {
					visibility: hidden;
				}
			}
		}
	}
}
</style>